import { Dialog, TextArea } from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import { useMemo, useState } from "react";
import MsgActionPup from "../MsgActionPup";
import { Del } from "@nutui/icons-react-taro";

const actionList: any = [
  {
    key: "del",
    title: "删除",
    icon: <Del size="1rem" />,
  },
];

const ChatTalkItem = ({ talkItem, selectTalk, onHandleChangeTalk }) => {
  const [dialogVisible, setDialogVisible] = useState(false);
  const [currentTask, setCurrentTask] = useState<any>({});
  const [pupData, setPupData] = useState<any>({});

  const handleLongPress = (e: Event, item: any) => {
    console.log("handleLongPress e", e);
    setPupData({
      event: e,
      item,
    });
  };

  const handleClick = (item: IMsgActionItem) => {
    const { item: itemData = {} } = pupData;
  };

  const editTask = (item) => {
    setCurrentTask(item);
    setDialogVisible(true);
  };

  const updateSession = async () => {
    const dto = {
      id: currentTask.id,
      summary: currentTask.content || "新对话",
    };
    onHandleChangeTalk("editor", dto);
  };

  return (
    <>
      <View
        className={`chat_talk_list_item ${
          selectTalk?.id === talkItem?.id ? "chat_talk_list_select_item" : ""
        }`}
        onClick={() => {
          if (selectTalk?.id !== talkItem?.id) {
            onHandleChangeTalk("select", talkItem);
          }
        }}
        onLongPress={(e: any) => {
          handleLongPress(e, talkItem);
        }}
      >
        {talkItem?.content}
      </View>
      <Dialog
        // title="自定义内容区域"
        visible={dialogVisible}
        onConfirm={updateSession}
        onCancel={() => setDialogVisible(false)}
      >
        <>
          <TextArea
            // style={{ fontSize: '12px' }}
            value={currentTask?.content}
            onChange={(value) => {
              setCurrentTask({
                ...currentTask,
                content: value.trim(),
              });
            }}
          />
        </>
      </Dialog>

      <MsgActionPup
        mode="mini"
        offset={{
          direction: "left",
          distance: "4rem", // 左边有头像等 需要偏移
        }}
        pupData={pupData}
        actionList={actionList}
        handleClick={handleClick}
      />
    </>
  );
};

export default ChatTalkItem;
